<template>
  <div>
    <div class="detial-body">
      <div class="index-memo-top" style="position: relative;">
        <div v-if="showTestFeatures" style="position: absolute;top: 0;right: 0;"
          class="index-card-footer-btn index-card-footer-btn-red index-memo-bottom-text index-memo-bottom-blue newbtn"
          @click="back">
          <div style="font-size: 15px">返回</div>
        </div>
        <img :src="info.index_img" class="index-memo-cover" />
        <!-- <el-image
                  :src="info.index_img"
                  fit="cover"
                  class="index-memo-cover"
                ></el-image> -->
        <div class="index-memo-top-right">
          <div class="index-memo-title">
            <span>{{ info.name }}</span>
            <!-- <span class="index-memo-title-red index-memo-title-dian">·</span> -->
            <span class="index-memo-title-red">{{ info.type_name }}</span>
          </div>
          <div class="index-memo-brief" v-for="item in info.brief" :key="item.id">
            <img v-if="item.type == 1" src="../../assets/img/03.png" class="index-memo-brief-icon" />
            <img v-if="item.type == 0" src="../../assets/img/02.png" class="index-memo-brief-icon" />
            <div class="index-memo-brief-txt">
              {{ item.content }}
            </div>
          </div>
        </div>
        <div class="index-memo-bottom">
          <div class="index-card-footer-btn index-card-footer-btn-red index-memo-bottom-text" style="margin-left: 0"
            @click="toForm()">
            <div>立即投保</div>
          </div>
        </div>
      </div>
      <!-- tab-->
      <div class="detail-tab">
        <div @click="changeTab(key)" :class="key == tab_index ? 'detail-tab-item active' : 'detail-tab-item'"
          v-for="(item, key) in tabs" :key="'tab' + key">
          {{ item }}
        </div>
        <!-- <div class="detail-tab-line" :style="{
          left: tab_index * 200 + 'px',
        }"></div> -->
      </div>

      <div v-if="tab_index == 0">
        <div class="type_btn_body" v-if="info.level.length > 1">
          <div class="type_btn" v-for="(item, index) in info.level" v-show="index <= 1" :key="index"
            :class="item.chooseTrue ? 'active_btn' : ''" @click="changeBtn(index)">
            <span> {{ item.name }}</span>
          </div>
        </div>
        <div v-show="i == index" v-for="(t, i) in info.level" :key="i">
          <div class="detail-rich" v-html="t.detail"></div>
        </div>
        <div style="font-size: 20px; font-weight: bold">常见问题</div>
        <div class="detail-rich" v-html="rich5"></div>
      </div>
      <div v-if="tab_index == 1">
        <div class="detail-rich" v-html="rich1"></div>
        <div style="margin-bottom: 10px;">保险条款</div>
        <div v-for="item in termsList" :key="item.id" @click="toTerms(item.id)"
          style="margin-bottom: 10px;cursor: pointer;">
          <div style="color: blue;">{{ item.title }}</div>

        </div>
      </div>
      <div v-if="tab_index == 2">
        <div class="detail-rich" v-html="rich2"></div>
      </div>
      <div v-if="tab_index == 3">
        <div>

          <div class="type_btn_body">
            <div class="type_btn" v-show="index <= 1" v-for="(item, index) in rich3" :key="index"
              :class="item.chooseTrue ? 'active_btn' : ''" @click="changeTy(index)">
              <span> {{ item.name }}</span>
            </div>
          </div>
          <div v-show="i == tyIndex" v-for="(t, i) in rich3" :key="i">
            <div class="detail-rich" v-html="t.content"></div>
          </div>
        </div>

        <!-- <div v-else class="detail-rich" v-html="rich3">

        </div> -->
      </div>
      <div v-if="tab_index == 4">
        <div class="detail-rich" v-html="rich4"></div>
      </div>
      <!-- <div v-if="tab_index == 5">
        <div class="detail-rich" v-html="rich5"></div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ["保险详情", "投保须知", "客户公告", "特别约定", "责任免除"],
      tab_index: 0,
      id: 0,
      info: {
        dt_level: [],
        level: [],
      },
      rich1: "",
      rich2: "",
      rich3: "",
      rich4: "",
      rich5: "",
      chooseDta: {},
      levelTenNum: 10,
      index: 0,
      termsList: [],
      tyIndex: 0
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    console.log(this.id);
    console.log('detail');
    this.getInfo();
    this.getData();
    this.getRich1();
    this.getTerms();

    // this.open();
  },
  methods: {
    getInfo() {
      this.ajaxs("user/getInfo", {
        success: (res) => {
          if (res.code) {
            this.$store.commit("updateUserInfo", res.msg);
            // this.userInfo = this.$store.state.userInfo;
            console.log(this.$store.state.userInfo);
            console.log("获取用户信息");

            this.$forceUpdate();
          }

        },
      });
    },
    back() {
      this.$router.back()
    },
    //条款详情
    toTerms(id) {
      this.$router.push({
        path: "/index/index/clause/" + id,
      });
    },
    //获取条款
    getTerms() {
      this.ajaxs("index/doc", {
        data: {
          bx_id: this.id,
        },
        success: (res) => {
          this.termsList = res.msg;
          console.log(res);
        },
      });

    },
    changeTy(index) {
      this.tyIndex = index;
      this.rich3.forEach((item) => {
        item.chooseTrue = false
      })
      this.rich3[index].chooseTrue = true;
    },
    changeBtn(index) {
      this.index = index;
      this.info.level.forEach((item) => {
        item.chooseTrue = false;
      });
      this.info.level[index].chooseTrue = true;
      // this.chooseDta = this.info[this.info.level[index].value];
      // this.levelTenNum = this.info.level[index].value;
      this.$forceUpdate();
    },
    open() {
      if (this.$store.state.loginState == false) {
        // 查看方案-登录判断
        // return this.$router.push({
        //   path: "/index/login/login",
        // });
      } else {
        this.ajaxs("order/getNoNay", {
          data: { id: this.id },
          success: (res) => {
            if (res.code) {
              this.$confirm("您有待支付订单知否跳转查看？\n", "重要提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  this.$router.push({
                    path: "/index/order/list/2",
                  });
                })
                .catch(() => { });
            }
          },
        });
      }
    },
    toForm() {

      if(!this.$store.state.userInfo.authentication){
        this.toast(0,'请先完成实名认证');
        return
      }

      if (this.$store.state.loginState == false) {
        // 查看方案-登录判断
        return this.$router.push({
          path: "/index/login/login",
        });
      } else {
        let text = "";
        if (this.info.type == 1) {
          text = "太平洋保险";
        } else if (this.info.type == 2) {
          text = "中国平安保险";
        } else if (this.info.type == 3) {
          text = "中国人寿保险";
        }
        this.$alert(
          `尊敬的客户，您即将进入${text}的产品投保流程。根据银保监会[2020] 26号的监管规定，为了维护您的权益，您在投保过程中的完整操作轨迹将被记录，请您仔细阅读条款、责任免除、特别约定等内容。`,
          "重要提示",
          {
            confirmButtonText: "确定",
            callback: (action) => {
              if (action == "confirm") {
                if (this.$store.state.loginState == false) {
                  return this.$router.push({
                    path: "/index/login/login",
                  });
                }

                this.$router.push({
                  path: "/index/index/form/" + this.id,
                });
              }
            },
          }
        );
      }
    },
    getRich1() {
      this.ajaxs("index/getInsureContent", {
        data: {
          id: this.id,
        },
        success: (res) => {
          this.rich1 = res.msg.notice;
          this.rich2 = res.msg.inform;
          this.rich3 = res.msg.contributing;
          this.rich4 = res.msg.exempt;
          this.rich5 = res.msg.problem;
          for (let i = 0; i < this.rich3.length; i++) {
            if (i == 0) {
              this.rich3[i].chooseTrue = true
            } else {
              this.rich3[i].chooseTrue = false;
            }
          }

        },
      });
    },
    getData() {
      this.ajaxs("index/detail", {
        data: {
          id: this.id,
        },
        success: (res) => {
          this.info = res.msg;
          this.info.level[0].chooseTrue = true;
          // window.document.title=this.info.name
        },
      });
    },
    changeTab(index) {
      this.tab_index = index;
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/index/index.css";
@import "../../assets/css/index/detail.css";

.active {
  background-color: #5180f9;
  color: white;
}

.topColor {
  background-color: #f3f3f3;
}

.detail-table-p-table-new {
  display: flex;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.detail-table-p-table-nb-new {
  border-top: none;
}

.detail-table-p-table-item1-new {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-right: 1px solid #dfdfdf;
  border-left: 1px solid #dfdfdf;
}

.detail-table-p-table-item-new {
  flex: 1;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-right: 1px solid #dfdfdf;
}

.type_btn_body {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.type_btn {
  padding: 0 10px;
  height: 40px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999999;
  border: 1px solid #e6e6e6;
  cursor: pointer;
  margin-right: 20px;
}

.active_btn {
  border: 1px solid #f76b6d;
  color: #ffffff;
  background-color: #f76b6d;
}
</style>
